<template>
  <div class="lc-file-upload">
    <p class="seg-title">文件上传1</p>
    <lc-file-upload-drag :tableData="tableData" @page-change="handlePageChange">
    </lc-file-upload-drag>
    <p class="seg-title">文件上传2</p>
    <lc-file-upload-table
      :tableData="tableData2"
      @page-change="handlePageChange2"
    ></lc-file-upload-table>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { uploadPageList } from "@/apis/upload";

defineOptions({
  name: "Upload9527",
});

onMounted(() => {
  getUploadPageList();
  getUploadPageList2();
});

// 文件上传拖拽 start
const tableData = ref([]);

const getUploadPageList = () => {
  let params = { page: 1, fileSize: 100 };
  uploadPageList(params).then((res) => {
    let tableValue = JSON.parse(JSON.stringify(res.data.rows));
    tableValue.map((item) => {
      item.username = JSON.parse(item.attr).username;
    });
    tableData.value = tableValue;
  });
};
const handlePageChange = () => {
  getUploadPageList();
};
// 文件上传拖拽 end

// 文件上传列表 start
const tableData2 = ref([]);

const handlePageChange2 = () => {
  getUploadPageList2();
};

const getUploadPageList2 = () => {
  let params = { page: 1, fileSize: 100 };
  uploadPageList(params).then((res) => {
    let tableValue = JSON.parse(JSON.stringify(res.data.rows));
    tableValue.map((item) => {
      item.username = JSON.parse(item.attr).username;
    });
    tableData2.value = tableValue;
  });
};
// 文件上传列表 end
</script>
<style scoped>
.lc-table-container {
  margin-right: 0 auto;
  padding: 20px;

  .seg-title {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 16px;
    font-weight: 600;
  }

  .seg-title:first-child {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
